<template>
  <div class="page page-profile">
    <van-nav-bar title="个人资料" left-text="返回" left-arrow @click-left="onClickLeft" />
    <div class="container">
      <van-cell-group>
        <van-cell title="用户名" :value="privateInfo.uname"  @click="name_show = true"/>
        <van-cell title="地址" :value="privateInfo.local"  @click="local_show = true"/>
        <van-cell
          title="邮箱"
          is-link
          :value="privateInfo.mail"
          @click="modifyMail"
        />
      </van-cell-group>
      <van-cell-group>
        <van-cell
          title="手机号码"
          is-link
          :value="privateInfo.tel"
          @click="phone_show = true"
        />
      </van-cell-group>
      <van-cell-group class="margin-top">
        <van-cell
          title="登录密码"
          value='修改密码'
          is-link
          @click="changePw"
        />
      </van-cell-group>
      
  </div>
    <van-popup v-model="name_show" position="bottom" class="phone_show">
      <van-field v-model="name" type="text" label="用户名:" placeholder="请输入用户名"  :clearable="true"/>
      <div class="submit-btn">
        <van-button type="info" @click="modifyName">修改用户名</van-button>
      </div>
    </van-popup>
    
    <van-popup v-model="local_show" position="bottom" class="phone_show">
      <van-field v-model="local" type="text" label="地址:" placeholder="请输入新地址"  :clearable="true"/>
      <div class="submit-btn">
        <van-button type="info" @click="modifylocal">修改地址</van-button>
      </div>
    </van-popup>
    <van-popup v-model="phone_show" position="bottom" class="phone_show">
      <van-field v-model="tel" type="tel" label="手机号:" placeholder="请输入手机号码"  :clearable="true"/>
      <div class="submit-btn">
        <van-button type="info" @click="unbindMobile">更改号码</van-button>
      </div>
    </van-popup>
    <van-popup v-model="password_show" position="bottom" class="password_show">
      <div v-if="oldPwShow" style="marginTop:2rem">
        <van-field v-model="oldPassword" type="password" label="原密码:" placeholder="请输入原密码"  clearable/>
        <div class="submit-btn">
          <van-button type="info" @click="next">下一步</van-button>
        </div>  
      </div>
      <div v-else>
        <van-field v-model="newPassword" type="password" label="新密码:" placeholder="请输入新密码"  :clearable="true"/>
        <van-field v-model="reNewPassword" type="password" label="确认新密码:" placeholder="请再次输入新密码"  :clearable="true"/>
        <div class="submit-btn">
          <van-button type="info" @click="modifyPassword">修改密码</van-button>
        </div>
      </div>
      
    </van-popup>
  </div>
</template>
<script >
import { Eecrypt } from '@/utils/aesEncryption'
import { getuserInfo, updateUserInfo} from '@/api.js'
export default {
  data() {
    return {
      fileList: [],
      name_show:false,
      local_show:false,
      phone_show: false,
      password_show: false,
      oldPwShow: true,
      name:'',
      local:'',
      tel: '',
      oldPassword: '',
      newPassword: '',
      reNewPassword: '',
      privateInfo:{}
    };
  },
  mounted() {
    this.getPrivateInfo()
  },
  methods: {
    async getPrivateInfo(){
            let user = this.$route.query.id
            let userInfo ={mail:user}  
            const {data} = await getuserInfo(userInfo)
            this.privateInfo = data
            console.log(this.privateInfo)
          },

    onClickLeft() {
      this.$router.back();
    },

    updateUserInfo(params) {
      params.userId = this.isLogin.userId;
      this.$http.post('/user/update', params).then(res => {
        if(res.data && res.data.success) {
          this.getUserInfo();
          this.$toast.success('更改成功');
        }
      }).catch(e => {
        console.log(e);
      })
    },
    async modifyMail() {
      this.$toast.success('邮箱绑定了用户信息,不能更改')
    },
    async modifyName() {
      if(!this.name){
        this.$toast.fail('请填写用户名')
        return
      }
      await updateUserInfo({
        uname: this.name,
        mail: this.privateInfo.mail
      })
      this.$toast.success('修改用户名成功')
      this.name_show = false
      this.getPrivateInfo()
    },
    async modifylocal() {
      if(!this.local){
        this.$toast.fail('请填写地址')
        return
      }
      if(!this.local.match(/(?=.+省)(?=.+市)(?=.+区)^.*$/)){
        this.$toast.fail('请严格按照XX省XX市XX区XX格式填写')
        return
      }
       await updateUserInfo({
        local: this.local,
        mail: this.privateInfo.mail
      })
      this.$toast.success('修改地址成功')
      this.local_show = false
      this.getPrivateInfo()
    },
   
    async unbindMobile() {
      if(!this.tel){
        this.$toast.fail('请填写手机号码')
        return
      }
      if(!this.tel.match(/^1[3-9]\d{9}$/)){
        this.$toast.fail('手机号码格式错误')
        return
      }
      if(this.tel && this.privateInfo.tel ==  this.tel){
        this.$toast.fail('手机号码未变更')
        return
      }
      await updateUserInfo({
        tel: this.tel,
        mail: this.privateInfo.mail
      })
      this.$toast.success('修改手机号码成功')
      this.phone_show = false
      this.getPrivateInfo()
    },
    next() {
      if(Eecrypt(this.oldPassword) === this.privateInfo.upassword) {
        this.oldPwShow = false;
      } else {
        this.$toast.fail('密码不正确，请重新输入');
      }
     
    },
    changePw() {
      this.password_show = true;
      this.oldPwShow = true;
      this.oldPassword = '';
    },
    async modifyPassword() {
      if(this.newPassword != this.reNewPassword) {
        this.$toast.fail('密码输入不一致')
      } else {
        await updateUserInfo({
        upassword: Eecrypt(this.newPassword),
        mail: this.privateInfo.mail
      }).then(res => {
          if(res.success) {
            this.$toast.success('修改成功，请重新登录')
            localStorage.removeItem('user')
            this.$router.push('/login')
          }
      })
      }
    }
  }
};
</script>
<style lang="less">
.file_show {
  text-align: center;
}
.phone_show {
  padding-top: 1rem;
  height: 8rem;
}
.password_show {
  height: 11rem;
}
</style>